<template>
  <div>
    <h2 v-if="authenticated">
      <span
        >{{ t$('sessions.title') }}<strong>{{ username }}</strong
        >]</span
      >
    </h2>

    <div class="alert alert-success" v-if="success" v-html="t$('sessions.messages.success')">
      <strong>Session invalidated!</strong>
    </div>
    <div class="alert alert-danger" v-if="error" v-html="t$('sessions.messages.error')">
      <strong>An error has occurred!</strong> The session could not be invalidated.
    </div>

    <div class="table-responsive">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>{{ t$('sessions.table.ipaddress') }}</th>
            <th>{{ t$('sessions.table.useragent') }}</th>
            <th>{{ t$('sessions.table.date') }}</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="session in sessions" :key="session.ipAddress">
            <td>{{ session.ipAddress }}</td>
            <td>{{ session.userAgent }}</td>
            <td>{{ session.tokenDate }}</td>
            <td>
              <button type="submit" class="btn btn-primary" @click="invalidate(session.series)">{{ t$('sessions.table.button') }}</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script lang="ts" src="./sessions.component.ts"></script>
